<template>
	<view class="z-box" :style="`padding-top:${BarNavHeight}px`">
		<u-navbar leftIconColor="#000" @leftClick="back" title="采样任务" :title-style="NavCss" bgColor="#f8f8f8">
			<view slot="right">
				<view v-if="isZY" @click="add" style="display: flex;">
					<u-icon name="plus" color="#000"></u-icon>
					<text style="margin-left: 3px; margin-right: 5px;">省控点</text>
				</view>
			</view>
		</u-navbar>
		<view>
			<view class="z-tab">
				<view class="z-tab-item">
					<view class="tab-content" @click="switchTab(1)">
						<view class="tab-content-inner">
							<view class="tab-text" :class="{selected: currTabIndex === 1}">国控点</view>
							<view class="z-badge"><u-badge max="99999" :value="counts['1']"></u-badge></view>
						</view>
					</view>
				</view>
				<view class="z-tab-item center">
					<view class="tab-content" @click="switchTab(2)">
						<view class="tab-content-inner">
							<view class="tab-text" :class="{selected: currTabIndex === 2}">编辑中</view>
							<view class="z-badge"><u-badge max="99999" :value="counts['2']"></u-badge></view>
						</view>
					</view>
				</view>
				<view class="z-tab-item">
					<view class="tab-content" @click="switchTab(3)">
						<view class="tab-content-inner">
							<view class="tab-text" :class="{selected: currTabIndex === 3}">已上报</view>
							<view class="z-badge"><u-badge max="99999" :value="counts['3']"></u-badge></view>
						</view>
					</view>
				</view>
			</view>
			<view class="z-tab">
				<view class="z-tab-item">
					<view class="tab-content" @click="switchTab(4)">
						<view class="tab-content-inner">
							<view class="tab-text" :class="{selected: currTabIndex === 4}">不通过</view>
							<view class="z-badge"><u-badge max="99999" :value="counts['4']"></u-badge></view>
						</view>
					</view>
				</view>
				<view class="z-tab-item center">
					<view class="tab-content" @click="switchTab(5)">
						<view class="tab-content-inner">
							<view class="tab-text" :class="{selected: currTabIndex === 5}">已审批</view>
							<view class="z-badge"><u-badge max="99999" :value="counts['5']"></u-badge></view>
						</view>
					</view>
				</view>
				<view class="z-tab-item">
					<view class="tab-content" @click="switchTab(6)">
						<view class="tab-content-inner">
							<view class="tab-text" :class="{selected: currTabIndex === 6}">已完成</view>
							<view class="z-badge"><u-badge max="99999" :value="counts['6']"></u-badge></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="z-body" :style="`height:${NTBodyHeight - 44}px`">
			<cj-task-item v-for="item in taskList" :taskData="item"></cj-task-item>
		</view>
		<u-notify ref="notify"></u-notify>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import LayoutMix from '@/mixins/layout-mix.js'
	import NotifyMix from '@/mixins/notify-fix.js'
	import API from '@/api/index.js'
	import CjTaskItem from './components/cj-task-item.vue'
	import Util from '../../utils'
	export default {
		mixins: [LayoutMix, NotifyMix],
		components: {
			'cj-task-item': CjTaskItem
		},
		data() {
			return {
				currTabIndex: 1,
				counts: this.createCounts(),
				taskList: []
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo
			}),
			isZZ() {
				const regex = /组长/;
				const contains = regex.test(this.userInfo.currentOrgPosition?.positionName);
				return contains
			},
			isZY() {
				const regex = /组员/;
				const contains = regex.test(this.userInfo.currentOrgPosition?.positionName);
				return contains
			}
		},
		methods: {
			createCounts() {
				return {
					'1': 0,
					'2': 0,
					'3': 0,
					'4': 0,
					'5': 0,
					'6': 0
				}
			},
			back() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			add() {
				uni.navigateTo({
					url: `/pages/cj-record/cj-record?action=add`
				})
			},
			async switchTab(val) {
				this.currTabIndex = val
				this.getTabList(val)
			},
			async getCounts() {
				uni.showLoading()
				const res = await API.CjTaskApi.getCJCounts()
				if (res.code !== 200 || !res.data) {
					this.notifyFail('获取任务列表失败')
					return
				}
				if (res.data.length > 0) {
					res.data.forEach(item => {
						if (item.taskStatus === '1') this.counts['1'] = item.count
						else if (item.taskStatus === '2') this.counts['2'] = item.count
						else if (item.taskStatus === '3') this.counts['3'] = item.count
						else if (item.taskStatus === '4') this.counts['5'] = item.count
						else if (item.taskStatus === '6') this.counts['6'] = item.count
						else if (['5', '7'].includes(item.taskStatus)) this.counts['4'] += item.count
					})
				}
				uni.hideLoading()
			},
			async getTabList(tabIndex) {
				const taskStatus = tabIndex + ''
				this.taskList = []
				if (this.counts[taskStatus] !== 0) {
					uni.showLoading()
					const res = await API.CjTaskApi.getCJlist(taskStatus)
					uni.hideLoading()
					if (res.code !== 200 || !res.data) {
						this.notifyFail('获取任务列表失败')
						return
					}
					this.taskList = res.data
				}
			}
		},
		async mounted() {
			await this.getCounts()
			this.getTabList(1)
		}
	}
</script>

<style lang="scss" scoped>
	.z-tab {
		width: 100vw;
		height: 44px;
		display: flex;

		.z-tab-item {
			width: 33.3vw;
			height: 44px;
			text-align: center;

			&.center {
				width: 33.4vw;
			}

			.tab-content {
				height: 44px;
				line-height: 44px;
				display: inline-block;
				position: relative;
				border-bottom: none;

				.tab-content-inner {
					display: flex;
				}

				.z-badge {
					padding-top: 16px;
					margin-left: 2px;
				}

				.tab-text {
					height: 44px;

					&.selected {
						border-bottom: 3px solid #3C9CFF;
					}
				}
			}
		}
	}

	.z-body {
		overflow: auto;
		background-color: #f5f5f5;
		padding-bottom: 8px;
	}
</style>